#include('header.html')
<script type="text/javascript">
	// 改变侧边栏激活
	changeTab(3);
</script>
<div id="mem" class="admin-content">
		<div class="pop-dialog" style="display: none;">
			<div class="pop-body">
				<span class="pop-close">&bigotimes;</span>
				<div class="pop-content">
					<div class="panel panel-info">
						<div class="panel-heading">
							<h4 class="panel-title">{{doThing}}</h4>
						</div>
						<div class="panel-body">
							<form @submit.prevent="saveOrUpdate">
								<div class="form-group">
									<div class="input-group">
										<span class="input-group-addon">姓名</span>
										<input v-model="member.name" class="form-control">
									</div>
								</div>
								<div class="form-group">
									<div class="input-group">
										<span class="input-group-addon">性别</span>
										<select v-model="member.sex" class="form-control">
											<option value="1">男</option>
											<option value="2">女</option>
										</select>
									</div>
								</div>
								<div class="form-group">
									<div class="input-group">
										<span class="input-group-addon">班级</span>
										<input v-model="member.grade" class="form-control">
									</div>
								</div>
								<div class="form-group">
									<div class="input-group">
										<span class="input-group-addon">电话</span>
										<input v-model="member.tel" class="form-control" maxlength="11">
									</div>
								</div>
								<div class="form-group">
									<div class="input-group">
										<span class="input-group-addon">&nbsp;QQ&nbsp;</span>
										<input v-model="member.qq" class="form-control" maxlength="10">
									</div>
								</div>
								<div class="form-group">
									<div class="input-group">
										<span class="input-group-addon">生日</span>
										<input type="date" v-model="member.birth" class="form-control">
									</div>
								</div>
								<button class="btn btn-group-justified btn-info">{{doThing}}</button>
							</form>
						</div>
					</div>
				</div>
			</div>
		</div>

	<div class="admin-box">
		<div class="col-lg-12 col-xs-12">
			<h4 class="pull-left"><a href="/admin/member">成员管理</a></h4>
			<div class="pull-right">
				<form @submit.prevent="search_">
					<input v-model="searchName" placeholder="姓名">
					<button type="submit" style="border-radius: 5px;" class="btn btn-default btn-sm">搜索</button>
					<button onclick="openPop('mem')" type="button" style="border-radius: 5px;" class="btn btn-info btn-sm">添加新成员</button>
				</form>
			</div>
		</div>

		<div class="col-lg-12 col-xs-12 table-responsive">
			<table class="table-bordered table table-striped">
				<thead>
					<tr>
						<td>姓名</td>
						<td>性别</td>
						<td>年级</td>
						<td>电话</td>
						<td>QQ号</td>
						<td>生日</td>
						<td style="width: 120px;">操作</td>
					</tr>
				</thead>
				<tbody>
					<tr class="text-center" v-show="list.length <= 0">
						<td colspan="7">暂无数据</td>
					</tr>
					<tr is="mem-tr" v-for="(item, index) in list" :mem="item" :index="index"
							:delete_="delete_" :edit="edit"></tr>
				</tbody>
			</table>
		</div>
		<!-- 分页按钮 -->
		<div class="col-lg-12 col-xs-12 text-center" v-show="pages.totalPages > 1">
			<ul class="pagination pagination-sm">
				<li><a href="javascript:" @click="jumpPage(1)">首页</a></li>
				<li v-for="pageNo in pages.numbers" :class="pageNo == pages.pageNum ? 'active' :''">
					<a href="javascript:" @click="jumpPage(pageNo)">{{pageNo}}</a>
				</li>
				<li><a href="javascript:" @click="jumpPage(pages.totalPages)">尾页</a></li>
			</ul>
		</div>
	</div>
</div>

<template id="mem-tr">
	<tr>
		<td>{{mem.name }}</td>
		<td><span :class="'memSex-' + mem.sex"></span></td>
		<td>{{mem.grade }}</td>
		<td>{{mem.tel }}</td>
		<td>{{mem.qq }}</td>
		<td>{{mem.birth }}</td>
		<td>
			<button @click="edit(index);" class="btn btn-xs btn-success">编辑</button>
			<button @click="delete_(index);" class="btn btn-xs btn-danger">删除</button>
		</td>
	</tr>
</template>
<script type="text/javascript">
	var mem = new Vue({
		el: '.admin-content',
		data: {
      doThing: '添加成员',
		  member: {
        id: null,
		    name: '',
				sex: 1,
        grade: '',
        tel: '',
				qq: '',
        birth: ''
			},
			temp: null,
			list: [],
      pages: { // 控制页码的显示
        totalRows: -1, // 总数据量
        totalPages: -1,// 总页数
        pageNum: 1, // 当前页码
        limit: 12,  // 每页的最大数
        numbers: [] // 自动生成的页码数组
      },
      searchName: ''
		},
		methods: {
      search_: function () {
				if (this.searchName !== '') {
				  $.post('/member/like', {name: this.searchName}, function (data) {
						mem.fillData(data, 1);
          });
				}
      },
      delete_: function (index) {
        if (index >= 0 && index < this.list.length) {
        	if (confirm("确定删除成员<" + this.list[index].name + ">?")) {
            var mb = this.list[index];
            $.post('/member/delete/' + mb.id, function (data) {
              if (data.success) {
                mem.list.splice(index, 1);
                this.flushMem();
              }
            });
          }
				}
      },
      edit: function (index) {
        if (index >= 0 && index < this.list.length) {
          this.member = this.list[index];
          this.temp = $.extend(true, this.temp, this.member);
          openPop('mem');
        }
      },
		  saveOrUpdate: function () {
        var model = {url: '/member/add', type: '保存'};
        if (this.member.id !== null) { // 不是null就是修改
					model.url  = '/member/change';
					model.type = '修改';
				}

        $.post(model.url, this.member, function (data) {
          if (data.success) {
            if (model.type === '保存') {
              mem.pages.totalRows++;
              mem.list.unshift(data.payload);
              if (mem.list.length > mem.pages.limit) {
                mem.list.pop();
							}
						}
          } else {
            if (mem.temp !== null) { // 如果修改失败 则回退数据
              for (var k in mem.member) {
                mem.member[k] = mem.temp[k];
              }
            }
					}
          closePop('mem');
        });
      },
			flushMem: function () {
				$.post('/member/page/' + this.pages.pageNum, function (data) {
          mem.fillData(data);
        });
      },
			jumpPage: function (pageNo) {
        if (pageNo !== undefined) {
          if (pageNo <= 0) pageNo = 1;
          else if (pageNo > this.pages.totalPages) pageNo = this.pages.totalPages;
          this.pages.pageNum = pageNo;
        }
        this.flushMem();
      },
			flushPage: function () {
        this.pages.numbers = createPage(this.pages.pageNum, this.pages.totalPages);
      },
      fillData: function (data, totalNum) {
        if (data.success) {
          this.list = data.payload.rows || [];

          this.pages.totalRows = data.payload.totalRows;
          this.pages.totalPages = totalNum || data.payload.totalPages;
          this.pages.pageNum = totalNum || data.payload.pageNum;
        } else {
          this.list = [];
          this.pages.totalRows = 0;
          this.pages.totalPages = 0;
          this.pages.pageNum = 1;
        }
      }
		},
		components: {
		  'mem-tr': {
		    props: ['mem', 'index', 'edit', 'delete_'],
				template: '#mem-tr'
			}
		},
		watch: {
		  'member.id': function (nv, ov) {
				if (nv > 0) {
          this.doThing = '信息修改';
				} else {
				  this.doThing = '添加成员';
				}
      },
			'pages.totalPages': function (nv, ov) {
				this.flushPage();
			},
			'pages.pageNum': function () {
				this.flushPage();
			},
      'pages.totalRows': function () {
		    this.pages.totalPages = parseInt(this.pages.totalRows / this.pages.limit)
																+ (this.pages.totalRows % this.pages.limit > 0 ? 1 : 0);
      }
		},
		mounted: function (e) {
		  this.flushMem();
    }
	});

	window.closeBefore = function () {
    mem.member = {id: null, sex: 1};
    mem.temp = null;
  }
</script>
#include('footer.html')